<template>
    <!-- 我的页面 -->
    <div class="mineBox">
        <div class="mt_145 plr_30">
            <!-- 个人信息 -->
            <router-link to="/personalData" class="flex_sb cellList">
                <div class="userInfo">
                    <span class="name" v-if="userInfo.nickName !=''">{{userInfo.nickName}}</span>
                    <span class="grade" v-if="vipInfo!='none'">{{vipInfo.name}}</span>
                    <span class="grad" v-if="vipInfo=='none'">未开通</span>
                </div>
                <div class="flex">
                    <p v-if="userInfo.largeAvatar!=''&&userInfo!=''">
                        <img :src="userInfo.largeAvatar" class="user_head"/>
                    </p>
                    <p v-if="userInfo.largeAvatar==''||userInfo==''">
                        <img src="../assets/images/avatar.png" class="user_head"/>
                    </p>
                    <img src="../assets/images/icon-more02.png"/>
                </div>
            </router-link>
            <!-- 列表 -->
            <router-link to="/myOrder" class="flex_sb cellList">
                <div class="myList_titel">
                    <img src="../assets/images/myIcon01.png"/>
                    <span class="fs_32">我的订单</span>
                </div>
                <img src="../assets/images/icon-more02.png"/>
            </router-link>
            <router-link to="/myCollect" class="flex_sb cellList">
                <div class="myList_titel">
                    <img src="../assets/images/myIcon02.png"/>
                    <span class="fs_32">我的收藏</span>
                </div>
                <img src="../assets/images/icon-more02.png"/>
            </router-link>

            <router-link to="/myClass" class="flex_sb cellList">
                <div class="myList_titel">
                    <img src="../assets/images/myIcon03.png"/>
                    <span class="fs_32">我的班级</span>
                </div>
                <img src="../assets/images/icon-more02.png"/>
            </router-link>
            <router-link to="/myStudyCard" class="flex_sb cellList" style="display: none">
                <div class="myList_titel">
                    <img src="../assets/images/myIcon04.png"/>
                    <span class="fs_32">我的学习卡</span>
                </div>
                <img src="../assets/images/icon-more02.png"/>
            </router-link>

            <router-link to="/myCoupon" class="flex_sb cellList">
                <div class="myList_titel">
                    <img src="../assets/images/myIcon05.png"/>
                    <span class="fs_32">我的优惠券</span>
                </div>
                <img src="../assets/images/icon-more02.png"/>
            </router-link>

            <div class="topLine"></div>

            <router-link to="/openMember" class="flex_sb cellList">
                <div class="myList_titel">
                    <img src="../assets/images/myIcon06.png"/>
                    <span class="fs_32">开通会员</span>
                </div>
                <img src="../assets/images/icon-more02.png"/>
            </router-link>

            <router-link to="/service" class="flex_sb cellList" style="display: none">
                <div class="myList_titel">
                    <img src="../assets/images/myIcon07.png"/>
                    <span class="fs_32">专属客服</span>
                </div>
                <img src="../assets/images/icon-more02.png"/>
            </router-link>

            <router-link to="/helpCenter" class="flex_sb cellList" style="display: none">
                <div class="myList_titel">
                    <img src="../assets/images/myIcon08.png"/>
                    <span class="fs_32">帮助中心</span>
                </div>
                <img src="../assets/images/icon-more02.png"/>
            </router-link>

            <router-link to="/mine" class="flex_sb cellList" style="display: none">
                <div class="myList_titel">
                    <img src="../assets/images/myIcon09.png"/>
                    <span class="fs_32">分享有礼</span>
                </div>
                <img src="../assets/images/icon-more02.png"/>
            </router-link>

            <router-link to="/setting" class="flex_sb cellList">
                <div class="myList_titel">
                    <img src="../assets/images/myIcon10.png"/>
                    <span class="fs_32">设置</span>
                </div>
                <img src="../assets/images/icon-more02.png"/>
            </router-link>

            <router-link to="/invitationCode" class="flex_sb cellList" style="display: none">
                <div class="myList_titel">
                    <img src="../assets/images/myIcon11.png"/>
                    <span class="fs_32">邀请码</span>
                </div>
                <img src="../assets/images/icon-more02.png"/>
            </router-link>
        </div>
        <TabBar></TabBar>
    </div>
</template>

<script>
    import TabBar from "../components/tabBar";
    import {userInfo} from '@/api/index/index';

    import store from "../store/store";

    export default {
        components: {
            TabBar,
        },
        data() {
            return {
                userId: '',
                userInfo: '',
                vipInfo: '',
            }
        },
        mounted() {
            console.log(this.$store.state.user.id);
            if (this.$store.state.user.id == '') {
                alert("请先登录");
                this.$router.push("/");
            } else {
                userInfo(this.$store.state.user.id).then(res => {
                    console.log(res.data.data);
                    this.userInfo = res.data.data.userInfo;
                    this.vipInfo = res.data.data.vipInfo;
                    this.userId = res.data.data.userInfo.id;
                }).catch(err => {
                    console.log(err)
                });
            }

        },
        methods: {}
    }
</script>

<style lang="less" scoped>
    .mineBox {
        padding-bottom: 120px;

        .cellList {
            color: currentColor;
            padding: 20px;

            .userInfo {
                .name {
                    font-size: 56px;
                    font-weight: 600;
                }

                .grade {
                    margin-left: 10px;
                    color: #fff;
                    background: #3498ff;
                    padding: 2px 10px;
                    font-size: 18px;
                    border-radius: 14px;
                }

                .grad {
                    margin-left: 10px;
                    color: #fff;
                    background: #ff2a12;
                    padding: 2px 10px;
                    font-size: 18px;
                    border-radius: 14px;
                }
            }

            .user_head {
                width: 124px;
                height: 124px;
                margin-right: 10px;
            }

            .fs_32 {
                font-size: 34px;
            }

            img {
                width: 30px;
                height: 30px;
                margin-top: 6px;
            }

            .myList_titel {
                display: flex;
                align-items: center;

                img {
                    width: 48px;
                    height: 48px;
                    vertical-align: middle;
                    margin-right: 10px;
                }
            }
        }
    }
</style>